<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>格式化表单</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .box {
            width: 600px;
            margin: 100px auto;
            text-align: center;
        }

        input[type="text"] {
            width: 300px;
            height: 40px;
            line-height: 40px;
            font-size: 16px;
            color: black;
            margin: 20px 0;
        }

        input[type="button"] {
            padding: 20px 40px;
            font-size: 20px;
            margin-top: 20px;
        }
    </style>
    <script src="../jQuery部分/jquery-1.11.1.min.js"></script>
    <script>
        $(function () {
            $("#btn").on("click", function () {
                var str = $("#getForm").serialize();
                console.log(str);

            })
        })
    </script>
</head>

<body>
    <div class="box">
        <form action="" id="getForm">
            <fieldset>
                <legend>个人信息表</legend>
                <input type="text" placeholder="请输入您的姓名" name="userName">
                <input type="text" placeholder="请输入您的性别" name="userSex">
                <input type="text" placeholder="请输入您的年龄" name="userYear">
                <input type="text" placeholder="请输入您的职业" name="userJob">
            </fieldset>
        </form>
        <input type="button" value="格式化表单" id='btn'>
    </div>
</body>

</html>